<!-- 预约挂号的组件 -->
<template>
  <div class="wrap">
    <!--顶部结构-->
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="line"></div>
      <div>{{ workData.baseMap?.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosdeparment">{{ workData.baseMap?.depname }}</div>
    </div>
    <!--中部结构 展示日期 -->
    <div class="center">
      <h1 class="time">{{ workData.baseMap?.workDateString }}</h1>
      <div class="container">
        <div
          class="item"
          :class="{
            active: item.status == -1 || item.availableNumber == -1,
            cur: item.workDate == workTime.workDate,
          }"
          v-for="item in workData.bookingScheduleList"
          @click="changeTime(item)"
          :key="item"
        >
          <div class="item_top">{{ item.workDate }}-{{ item.dayOfWeek }}</div>
          <div class="item_bottom">
            <div v-if="item.status == -1">停止挂号</div>
            <div v-if="item.status == 0">
              {{
                item.availableNumber == -1
                  ? "约满了"
                  : `有号(${item.availableNumber})`
              }}
            </div>
            <div v-if="item.status == 1">即将放号</div>
          </div>
        </div>
      </div>
      <!--分页器-->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:total="workData.total"
        @current-change="fetchWrokData"
        layout="prev, pager, next"
      />
    </div>

    <!--底部展示医生的结构-->
    <div class="bottom">
      <!--展示即将放号的时间-->
      <div class="will" v-if="workTime.status == 1">
        <span class="time">2023年10月23日08:30</span>
        <span class="willText">放号</span>
      </div>
      <!--展示医生的结构：上午、下午-->
      <div class="doctor" v-else>
        <!--上午-->
        <div class="moring">
          <!--顶部文字提示-->
          <div class="tip">
            <svg
              t="1698026352093"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4740"
              width="32"
              height="32"
            >
              <path
                d="M904.101037 676.946871H118.670712c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h785.430325c15.461511 0 28.105271 12.643759 28.105271 28.10527s-12.607634 28.033021-28.105271 28.033021z m-56.029916-324.980738c-11.018133 10.945883-28.719396 10.945883-39.665279 0-11.018133-10.945883-11.018133-28.755521 0-39.665279l39.665279-39.665279a27.97522 27.97522 0 0 1 39.593029 0 27.93187 27.93187 0 0 1 0 39.665279l-39.593029 39.665279z m-62.279545 212.776406c-26.082269-128.027094-138.683977-224.444789-274.441826-224.44479-135.649474 0-248.287307 96.417696-274.369576 224.44479H177.915755c21.602766-158.263741 162.454244-280.583081 333.433995-280.583081 171.088125 0 311.903478 122.31934 333.506244 280.583081h-59.064418z m-274.441826-336.612997c-15.461511 0-28.033021-12.535384-28.033021-28.10527V143.95823c0-15.461511 12.535384-28.105271 28.033021-28.10527 15.569886 0 28.105271 12.643759 28.10527 28.10527v56.029916c0 15.606011-12.535384 28.141396-28.10527 28.141396zM174.700628 351.966133L135.035349 312.264729c-10.945883-10.945883-10.945883-28.755521 0-39.665279 11.018133-10.945883 28.719396-10.945883 39.665279 0l39.665279 39.665279a27.93187 27.93187 0 0 1 0 39.665279c-10.909758 10.982008-28.647146 10.982008-39.665279 0.036125z m-28.033021 381.119029h729.40041c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021H146.667607c-15.497636 0-28.033021-12.535384-28.03302-28.033021 0.036125-15.497636 12.571509-28.033021 28.03302-28.03302z m84.171312 112.168207h561.093911c15.497636 0 28.033021 12.535384 28.033021 28.033021 0 15.569886-12.535384 28.105271-28.033021 28.10527H230.838919c-15.497636 0-28.033021-12.535384-28.03302-28.10527 0-15.497636 12.535384-28.033021 28.03302-28.033021z"
                fill="#1296db"
                p-id="4741"
              ></path>
            </svg>
            <span class="text">上午号源</span>
          </div>
          <!--每一个医生的信息-->
          <div class="doc_info" v-for="doctor in moringArr" :key="doctor.id">
            <!-- 展示医生的名字|技能 -->
            <div class="left">
              <div class="info">
                <span>{{ doctor.title }}</span>
                <span>|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <!-- 右侧区域展示挂号的钱数-->
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button
                type="primary"
                size="default"
                @click="goStep2(doctor)"
                >{{ doctor.availableNumber }}</el-button
              >
            </div>
          </div>
        </div>
        <!-- 下午 -->
        <div class="moring">
          <!-- 顶部文字提示 -->
          <div class="tip">
            <svg
              t="1698027689118"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12337"
              width="32"
              height="32"
            >
              <path
                d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z"
                fill="#1296db"
                p-id="12338"
              ></path>
              <path
                d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z"
                fill="#1296db"
                p-id="12339"
              ></path>
            </svg>
            <span class="text">下午号源</span>
          </div>
          <!--每一个医生的信息-->
          <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
            <!-- 展示医生的名字|技能 -->
            <div class="left">
              <div class="info">
                <span>{{ doctor.title }}</span>
                <span>|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <!-- 右侧区域展示挂号的钱数-->
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button
                type="primary"
                size="default"
                @click="goStep2(doctor)"
                >{{ doctor.availableNumber }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { reqHospitalWork, reqHospitalDoctor } from "@/api/hospital/index";
import type {
  HospitalWorkData,
  DoctorResponseData,
  DocArr,
  Doctor,
} from "@/api/hospital/type";

import { useRoute, useRouter } from "vue-router";

//获取路由对象
let $route = useRoute();
//获取路由对象
let $router = useRouter();

//分页器当前页码
let pageNo = ref<number>(1);
//每一页展示几条数据
let limit = ref<number>(6);

//存储医院科室挂号的数据
let workData = ref<any>({});
//解决警告  [ElPagination] 你使用了一些已被废弃的用法，请参考 el-pagination 的官方文档
workData.value.total = 0;

//存储排班日期
let workTime: any = ref({});

//存储排班医生的数据
let docArr = ref<DocArr>([]);

//组件挂载完毕发一次请求
onMounted(async () => {
  await fetchWrokData();
});

//获取挂号的数据
const fetchWrokData = async () => {
  let result: HospitalWorkData = await reqHospitalWork(
    pageNo.value,
    limit.value,
    $route.query.hoscode as string,
    $route.query.depcode as string
  );

  if (result.code == 200) {
    workData.value = result.data;
    //存储第一天的数据
    workTime.value = workData.value.bookingScheduleList[0];
    //获取一次医生的数据
    getDoctorWorkData();
  }
};

//获取某一天医生排班的数据
const getDoctorWorkData = async () => {
  //医院的编号
  let hoscode = $route.query.hoscode as string;
  //科室的编号
  let depcode = $route.query.depcode as string;
  //时间
  let workDate = workTime.value.workDate;
  let result: DoctorResponseData = await reqHospitalDoctor(
    hoscode,
    depcode,
    workDate
  );
  if (result.code == 200) {
    docArr.value = result.data;
  }
};

//点击顶部某一天的时候触发回调
const changeTime = (item: any) => {
  //存储用户选择哪一天的数据
  workTime.value = item;
  //再发请求
  getDoctorWorkData();
};

//计算出上午排班的医生数据
let moringArr = computed(() => {
  return docArr.value.filter((doc: Doctor) => {
    return doc.workTime == 0;
  });
});

//计算出下午排班的医生数据
let afterArr = computed(() => {
  return docArr.value.filter((doc: Doctor) => {
    return doc.workTime == 1;
  });
});

//路由跳转进入到选择就诊人页面
const goStep2 = (doctor: Doctor) => {
  //编程式导航进行路由跳转且携带医生的ID
  $router.push({ path: "/hospital/register_step2", query: { docId: doctor.id } });
};
</script>

<style lang="scss" scoped>
.wrap {
  .top {
    display: flex;
    color: #7f7f7f;

    .line {
      width: 3px;
      height: 20px;
      background-color: skyblue;
      margin: 0px 5px;
    }

    .dot {
      margin: 0px 10px;
      color: skyblue;
      line-height: 10px;
    }
  }

  .center {
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .time {
      font-weight: 900;
    }

    .container {
      width: 100%;
      display: flex;
      margin: 30px 0px;

      .item {
        flex: 1;
        border: 1px solid skyblue;
        margin: 0px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s; //过渡动画

        .item_top {
          background: #e8f2ff;
          width: 100%;
          text-align: center;
          line-height: 30px;
        }

        .item_bottom {
          width: 100%;
          text-align: center;
          line-height: 60px;
        }

        &.active {
          border: 1px solid #ccc;
          color: #7f7f7f;

          .item_top {
            background: #ccc;
          }
        }

        &.cur {
          transform: scale(1.1); //放大
        }

        .item_top {
          background: #e8f2ff;
          height: 30px;
          width: 100%;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }

  .bottom {
    .will {
      text-align: center;
      font-size: 30px;
      font-weight: 900;

      .time {
        color: blue;
      }

      .willText {
        color: #7f7f7f;
      }
    }

    .doctor {
      .moring {
        .tip {
          display: flex;
          align-items: center;

          .text {
            color: #7f7f7f;
            font-weight: 900;
          }
        }

        .doc_info {
          display: flex;
          justify-content: space-between;
          margin: 10px 0px;
          border-bottom: 1px solid #ccc;

          .left {
            .info {
              color: skyblue;
              margin: 10px 0px;

              span {
                margin: 0px 5px;
                font-size: 18px;
                font-weight: 900;
              }
            }

            .skill {
              margin: 10px 0px;
              color: #7f7f7f;
            }
          }

          .right {
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .money {
              color: #7f7f7f;
              font-weight: 900;
            }
          }
        }
      }
    }
  }
}
</style>